<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-11-27
  Time: 8:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="${pageContext.request.contextPath}/commen/commen.jsp"></jsp:include>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 900px;height:700px; text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    $.post("/xiaoshouxx/querydiqu",function (data) {
        var bb =[];

        $.each(data.xl,function (index,item) {
            var v ={name:item.diqu,value:item.xiaoliang}
            bb.push(v);
        })

        myChart.setOption({
            title : {
                text: '全国销量',
                subtext: '数据来源销售统计'
            },
            tooltip : {
                trigger: 'item'
            },
            dataRange: {
                orient: 'horizontal',
                min: 0,
                max: 500,
                text:['高','低'],           // 文本，默认为数值文本
                splitNumber:0
            },
            toolbox: {
                show : true,
                orient: 'vertical',
                x:'right',
                y:'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false}
                }
            },
            series : [
                {
                    name: '全国销量',
                    type: 'map',
                    mapType: 'china',
                    mapLocation: {
                        x: 'left'
                    },
                    selectedMode : 'multiple',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:bb
                },

            ],
            animation: false
        })

    })



</script>
</body>
</html>
